<template>
    <div class="page-container-inner flex-auto">
        <div class="px-3">
            <div v-if="['loading', 'error'].indexOf(dataStatus) >= 0" class="text-center py-5">
                <component-page-loading :status="dataStatus" @reload="getData"></component-page-loading>
            </div>
            <div v-else>
                <!--显示-->
                <div v-if="!dataEditStatus">
                    <!--玩家-->
                    <div class="content-view">
                        <el-divider>{{ $t('stats.risk.slo.classifyList.player.label') }}</el-divider>
                        <el-table :data="data.player" border>
                            <el-table-column :label="$t('stats.risk.slo.cresset')" prop="color" class-name="p-0">
                                <template slot-scope="scope">
                                    <div style="height: 22px" :style="{background:scope.row.color}"></div>
                                </template>
                            </el-table-column>
                            <el-table-column label="RTP" prop="rtp">
                                <template slot-scope="scope">{{ scope.row.rtp[0] }} {{ scope.row.rtp[1] }}</template>
                            </el-table-column>
                            <el-table-column :label="$t('game.data.settlement.gain_player')+'(USD)'" prop="gain_player">
                                <template slot-scope="scope">{{ scope.row.gain_player[0] }} {{ scope.row.gain_player[1] }}</template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!--游戏-->
                    <div class="content-view">
                        <el-divider>{{ $t('stats.risk.slo.classifyList.game.label') }}</el-divider>
                        <el-table :data="data.game" border>
                            <el-table-column :label="$t('stats.risk.slo.cresset')" prop="color" class-name="p-0">
                                <template slot-scope="scope">
                                    <div style="height: 22px" :style="{background:scope.row.color}"></div>
                                </template>
                            </el-table-column>
                            <el-table-column label="RTP" prop="rtp">
                                <template slot-scope="scope">{{ scope.row.rtp[0] }} {{ scope.row.rtp[1] }}</template>
                            </el-table-column>
                            <el-table-column :label="$t('game.data.settlement.gain_player')+'(USD)'" prop="gain_player">
                                <template slot-scope="scope">{{ scope.row.gain_player[0] }} {{ scope.row.gain_player[1] }}</template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!--平台游戏-->
                    <div class="content-view">
                        <el-divider>{{ $t('stats.risk.slo.classifyList.org-game.label') }}</el-divider>
                        <el-table :data="data.orgGame" border>
                            <el-table-column :label="$t('stats.risk.slo.cresset')" prop="color" class-name="p-0">
                                <template slot-scope="scope">
                                    <div style="height: 22px" :style="{background:scope.row.color}"></div>
                                </template>
                            </el-table-column>
                            <el-table-column label="RTP" prop="rtp">
                                <template slot-scope="scope">{{ scope.row.rtp[0] }} {{ scope.row.rtp[1] }}</template>
                            </el-table-column>
                            <el-table-column :label="$t('game.data.settlement.gain_player')+'(USD)'" prop="gain_player">
                                <template slot-scope="scope">{{ scope.row.gain_player[0] }} {{ scope.row.gain_player[1] }}</template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!--操作-->
                    <div class="pt-5">
                        <el-button @click="editData">{{ $t('action.edit') }}</el-button>
                    </div>
                </div>
                <!--编辑-->
                <div v-if="dataEditStatus" class="pt-5">
                    <!--玩家-->
                    <div class="content-edit">
                        <el-divider>{{ $t('stats.risk.slo.classifyList.player.label') }}</el-divider>
                        <el-form :inline="true" :model="cresset" v-for="(cresset, index) in dataCache.player" :key="index">
                            <el-form-item :label="$t('stats.risk.slo.cresset')" class="-mb-3"
                                          :error="Boolean(msg.errors['player.'+index +'.color']) ? msg.errors['player.'+index +'.color'][0] : ''">
                                <el-color-picker v-model="cresset.color"></el-color-picker>
                            </el-form-item>
                            <el-form-item label="RTP"
                                          :error="Boolean(msg.errors['player.'+index +'.rtp.1']) ? msg.errors['player.'+index +'.rtp.1'][0] : ''">
                                <el-input type="number" v-model.number="cresset.rtp[1]" class="input-search-select">
                                    <el-select slot="prepend" v-model="cresset.rtp[0]">
                                        <el-option v-for="(item, index) in conditionList" :key="index" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                            <el-form-item :label="$t('game.data.settlement.gain_player')+'(USD)'"
                                          :error="Boolean(msg.errors['player.'+index +'.gain_player.1']) ? msg.errors['player.'+index +'.gain_player.1'][0] : ''">
                                <el-input type="number" v-model.number="cresset.gain_player[1]" class="input-search-select">
                                    <el-select slot="prepend" v-model="cresset.gain_player[0]">
                                        <el-option v-for="(item, index) in conditionList" :key="index" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" icon="el-icon-close" circle @click="removeItemOrAdd(dataCache.player, index, cressetItem)"></el-button>
                            </el-form-item>
                        </el-form>
                        <div class="pb-3">
                            <el-button size="small" @click="addItem(dataCache.player, cressetItem)">{{ $t('action.add') }}</el-button>
                        </div>
                    </div>
                    <!--游戏-->
                    <div class="content-edit">
                        <el-divider>{{ $t('stats.risk.slo.classifyList.game.label') }}</el-divider>
                        <el-form :inline="true" :model="cresset" v-for="(cresset, index) in dataCache.game" :key="index">
                            <el-form-item :label="$t('stats.risk.slo.cresset')" class="-mb-3"
                                          :error="Boolean(msg.errors['player.'+index +'.color']) ? msg.errors['player.'+index +'.color'][0] : ''">
                                <el-color-picker v-model="cresset.color"></el-color-picker>
                            </el-form-item>
                            <el-form-item label="RTP"
                                          :error="Boolean(msg.errors['player.'+index +'.rtp.1']) ? msg.errors['player.'+index +'.rtp.1'][0] : ''">
                                <el-input type="number" v-model.number="cresset.rtp[1]" class="input-search-select">
                                    <el-select slot="prepend" v-model="cresset.rtp[0]">
                                        <el-option v-for="(item, index) in conditionList" :key="index" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                            <el-form-item :label="$t('game.data.settlement.gain_player')+'(USD)'"
                                          :error="Boolean(msg.errors['player.'+index +'.gain_player.1']) ? msg.errors['player.'+index +'.gain_player.1'][0] : ''">
                                <el-input type="number" v-model.number="cresset.gain_player[1]" class="input-search-select">
                                    <el-select slot="prepend" v-model="cresset.gain_player[0]">
                                        <el-option v-for="(item, index) in conditionList" :key="index" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" icon="el-icon-close" circle @click="removeItemOrAdd(dataCache.game, index, cressetItem)"></el-button>
                            </el-form-item>
                        </el-form>
                        <div class="pb-3">
                            <el-button size="small" @click="addItem(dataCache.game, cressetItem)">{{ $t('action.add') }}</el-button>
                        </div>
                    </div>
                    <!--平台游戏-->
                    <div class="content-edit">
                        <el-divider>{{ $t('stats.risk.slo.classifyList.org-game.label') }}</el-divider>
                        <el-form :inline="true" :model="cresset" v-for="(cresset, index) in dataCache.orgGame" :key="index">
                            <el-form-item :label="$t('stats.risk.slo.cresset')" class="-mb-3"
                                          :error="Boolean(msg.errors['player.'+index +'.color']) ? msg.errors['player.'+index +'.color'][0] : ''">
                                <el-color-picker v-model="cresset.color"></el-color-picker>
                            </el-form-item>
                            <el-form-item label="RTP"
                                          :error="Boolean(msg.errors['player.'+index +'.rtp.1']) ? msg.errors['player.'+index +'.rtp.1'][0] : ''">
                                <el-input type="number" v-model.number="cresset.rtp[1]" class="input-search-select">
                                    <el-select slot="prepend" v-model="cresset.rtp[0]">
                                        <el-option v-for="(item, index) in conditionList" :key="index" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                            <el-form-item :label="$t('game.data.settlement.gain_player')+'(USD)'"
                                          :error="Boolean(msg.errors['player.'+index +'.gain_player.1']) ? msg.errors['player.'+index +'.gain_player.1'][0] : ''">
                                <el-input type="number" v-model.number="cresset.gain_player[1]" class="input-search-select">
                                    <el-select slot="prepend" v-model="cresset.gain_player[0]">
                                        <el-option v-for="(item, index) in conditionList" :key="index" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small" icon="el-icon-close" circle @click="removeItemOrAdd(dataCache.orgGame, index, cressetItem)"></el-button>
                            </el-form-item>
                        </el-form>
                        <div class="pb-3">
                            <el-button size="small" @click="addItem(dataCache.orgGame, cressetItem)">{{ $t('action.add') }}</el-button>
                        </div>
                    </div>
                    <!--操作-->
                    <div class="pt-5">
                        <el-button type="primary" @click="onSubmit">{{ $t('action.save') }}</el-button>
                        <el-button @click="dataEditStatus = false">{{ $t('action.cancel') }}</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    props: ['activeName'],
    data() {
        return {
            initStatus: false,
            dataStatus: 'dle',
            data: {
                player: [{
                    gain_player: ['>=', null],
                    rtp: ['>=', null],
                    color: null,
                }],
                game: [{
                    gain_player: ['>=', null],
                    rtp: ['>=', null],
                    color: null,
                }],
                orgGame: [{
                    gain_player: ['>=', null],
                    rtp: ['>=', null],
                    color: null,
                }],
            },
            cressetItem: {
                gain_player: ['>=', null],
                rtp: ['>=', null],
                color: null,
            },
            dataEditStatus: false,
            dataCache: {},
            msg: {
                code: 200,
                message: '',
                errors: {},
            },
            conditionList: {
                '<': {label: '<', value: '<'},
                '<=': {label: '<=', value: '<='},
                '>': {label: '>', value: '>'},
                '>=': {label: '>=', value: '>='}
            },
        }
    },
    computed: {
        error_globals_person_revise: function () {
            for (let key in this.msg.errors) {
                if (_.startsWith(key, 'globals.person_revise.revise')) {
                    return this.msg.errors[key][0];
                }
            }
        },
    },
    watch: {
        activeName: {
            immediate: true,
            handler(n, o) {
                if (n == 'config' && !this.initStatus) {
                    // 标记初始化
                    this.initStatus = true;
                    // 获取数据
                    this.getData();
                }
            }
        },
    },
    methods: {
        getData() {
            this.dataStatus = 'loading';
            // 获取数据
            axios.get('/stats/risk/slo/getConfig').then((response) => {
                if (response.data.resp_msg.code == 200) {
                    if (response.data.resp_data.game != null) {
                        this.data = response.data.resp_data;
                    }
                    this.dataStatus = 'dle';
                } else {
                    this.dataStatus = 'error';
                }
            })
        },
        initMsg() {
            this.msg.code = 200;
            this.msg.message = '';
            this.msg.errors = {};
        },
        editData() {
            // 重置验证
            this.initMsg();
            // 克隆数据
            this.dataCache = _.cloneDeep(this.data);
            // 编辑状态
            this.dataEditStatus = true;
        },
        addItem(configs, item) {
            configs.push(_.cloneDeep(item));
        },
        removeItem(configs, index) {
            configs.splice(index, 1);
        },
        removeItemOrAdd(configs, index, item) {
            this.removeItem(configs, index);
            if (!configs.length) {
                this.addItem(configs, item);
            }
        },
        onSubmit() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/stats/risk/slo/updateOrCreateConfig', this.dataCache).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.save')}),
                        showClose: true
                    });
                    this.dataEditStatus = false;
                    // 更新数据
                    this.data = response.data.resp_data;
                } else if (_.includes([42000], response.data.resp_msg.code)) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.save')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.content-view {
    max-width: 600px;
    padding: 20px 0;
}

.content-edit {
    max-width: 700px;
}

::v-deep .input-search-select {
    width: 180px;
}

::v-deep .input-search-select .el-select .el-input {
    width: 70px;
}
</style>
